<template>
    <div style="background-color: var(--van-background-2);">
        <h4 style="padding: 6px;margin-bottom: 0;" v-if="instance.title">{{ instance.title }} <span
                class="textbutton refresh" @click="() => instance.refresh(1)">
                <icon name="replay"></icon>
            </span>
        </h4>
        <Empty v-if="instance.list.length === 0"></Empty>
        <template v-for="row, index in instance.list" :key="index">
            <div class="item" @click="() => emits('about', row)">
                <div class="tag" v-if="!row.readed"></div>
                <Image class="avatar" :src="row.LastMessage.User.fullUrl"></Image>
                <div class="center" @click="onRead(row.groupName, row.type)">
                    <div class="title">{{ row.LastMessage.User.nickname }}
                        <span :style="'color:' + instance.titles[row.type].color">
                            {{ instance.titles[row.type].text }}</span>
                    </div>
                    <div class="message">
                        {{ instance.types[row.LastMessage.type]?.formatter(row.LastMessage.msg) }}
                    </div>
                </div>
                <div class="end" style="text-align: right;">
                    <bDelete text="是否删除会话" @onconfirm="() => instance.delete(index)">
                        <Icon name="delete"></Icon>
                    </bDelete>
                    <div style="margin-top: 8px;">{{ row.LastMessage.create }}</div>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { GroupList } from "@b/model/base/group";
import { Empty, Icon, Image } from "vant";
import bDelete from "@m/components/widget/b_delete.vue";
import { useRouter } from 'vue-router';
import type { groupType, interGroupInfo } from "@b/model/base/type";
interface prop {
    instance: GroupList
}

const { instance } = defineProps<prop>()
const router = useRouter()
const emits = defineEmits<{
    (e: 'about', item: interGroupInfo): void
}>()
if (instance.immediateCheck) {
    instance.refresh(1)
}
const onRead = (id: string, type: groupType) => {
    if (type === 'C2C')
        router.push('C2CList?id=' + id)
}
</script>
<style scoped>
.refresh {
    padding-bottom: 0;
    font-size: 0.85em;
}

.item {
    position: relative;
    display: flex;
    padding: 16px;
    align-items: center;
    border-bottom: 1px solid var(--van-border-color);
}

.item .avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 12px;
}

.item .center {
    flex-grow: 1;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 4px;
    height: 100%;
}

.item .title {
    color: var(--van-text-color-2);
    font-size: 0.75em;
    min-width: 5em;
    height: 100%;
}

.item .end {
    color: var(--van-text-color-2);
    font-size: 0.75em;
    min-width: 5em;
    height: 100%;
}

.item .message {
    margin-top: 8px;
    font-size: 0.8rem;
}

.tag {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color--);
    position: absolute;
    top: 8px;
    right: 34px;
}
</style>